<template>
	<view>
		<cu-custom :key="'header'+headerKey" class="box1" bgColor="bg-gradual-blue" :isBack="true" backText="返回" title="个人名片"></cu-custom>
		<view class="box2 bg-img " style="background-image: url(https://ewm.rsj.jinhua.gov.cn/jhrs/api/common/file/show/jycy/77c5f8bf0a27407db352a6285507b78f);overflow: hidden;">
			<view v-if="photo" style="margin-left: 30rpx;" class="cu-avatar round lg" :style="[{ backgroundImage:'url(' + photo + ')' }]">
			</view>
			<view v-else class="cu-avatar  round margin-left" style="background-color: #F0F0F0; height: 60rpx;width: 60rpx;margin-top: 47.5rpx; margin-left: 50rpx;">
				<text style="color: #B1D0E9;font-size: 85rpx;" class="iconfont icon-jiatingchengyuanmorentouxiang"></text>
			</view>
			<view class="name margin-left">{{ fullName }}</view>
			<view v-if="sex === '1'" class="old margin-left"> 男</view>
			<view v-if="sex === '2'" class="old margin-left"> 女</view>
			<view class="phone margin-left">
				<text class="basefont icon-mobile-fill" style="color: white;"></text>
				<text class="number">{{ phone }}</text>
			</view>
			<view class="id margin-left">身份证号码</view>
			<view class="idcard margin-left ">{{ idcard }}</view>
		</view>
		<view class="box3">
			<view class="text1 margin-left">健康信息</view>
			<view class="state margin-left">{{ aae013 }}</view>
		</view>
		<view class="box4">
			<view class="text2">社保卡信息</view>
			<view class="text3">
				开户银行
				<view class="bank margin-left">{{ bankName }}</view>
			</view>
			<view class="text4">
				社保卡号
				<view class="card margin-left">{{ ybCardId }}</view>
			</view>
			<view class="text5">
				银行卡号
				<view class="num margin-left">{{ ybBianma }}</view>
			</view>
		</view> 
		<view class="box5">
			<view
				class="iconfont icon-canbaoxinxichaxun"
				style="font-size: 70rpx;
				height: 300rpx;
				width: 100rpx;
				margin-left:96rpx;
				margin-top: 5rpx;"
				@tap="canbao"
			></view>
			<view class="text6">参保信息查询</view>
			<view
				class="iconfont icon-daiyuxinxichaxun"
				style="font-size: 70rpx;
				height: 300rpx;
				width: 100rpx;
				margin-left:490rpx;
				margin-top: -137rpx;"
				@tap="gongzuo"
			></view>
			<view class="text7">工作经历查询</view>
			<view
				class="iconfont icon-daiyuxinxichaxun"
				style="font-size: 70rpx;
				height: 300rpx;
				width: 100rpx;
				margin-left:293rpx;
				margin-top: -137rpx;"
				@tap="daiyu"
			></view>
			<view class="text8">待遇信息查询</view>
		</view>			
	</view>
</template>

<script>
import store from '@/store';
import api from '@/api/society/my/insurance.js';
import reqConfig from '@/common/config/reqConfig.js';
export default {
	onShow() {
		this.headerKey += 1;
	},
	data() {
		return {
			headerKey:0,
			fullName: store.state.hh_user.fullName,
			photo:store.state.hh_user.photoPath,
			sex: store.state.hh_user.sex,
			phone: store.state.hh_user.cellphone,
			bankName: '',
			ybCardId: '',
			ybBianma:'',
			cardCode: '',
			idcard: store.state.hh_user.idcard,
			aae013: ''
		};
	},
	methods: {
		gongzuo: function() {
			this.$Router.push({
				name: 'work'
			}); 
		},
		canbao: function() {
			this.$Router.push({
				name: 'neoinsurance'
			}); 
		},
		daiyu: function() {
			this.$Router.push({
				name: 'treatment'
			}); 
		},
		indexs: function() {
			const data = {};
			data.idcard = this.idcard;
			this.$http
				.post(api.getBusinessCard, data)
				.then(res => {
					this.show = true;
					this.bankName = res.result.sinCardVo.bankName;
					this.ybCardId = res.result.sinCardVo.ybCardId;
					this.cardCode = res.result.sinCardVo.ybCardId;
					this.aae013 = res.result.healthCodeVO.aae013;
				})
				.catch(err => {});
		}
	},
	onReady() {
		//自动加载indexs方法
		this.indexs();
	}
};
</script>

<style>
.box1 {
	white-space: normal;
	width: 750upx;
	height: 400upx;
	padding: 0upx;
	margin-top: 0upx;
	margin-left: 0upx;
	float: left;
	position: absolute;
	top: 0upx;
	left: 0upx;
	background-image: linear-gradient(223deg, #19b8b9 0%, #0182fe 100%);
	border-radius: 0upx;
	border-bottom-left-radius: 100upx;
	border-bottom-right-radius: 100upx;
	font-size: 20rpx;
}
,
.box2 {
	white-space: normal;
	width: 670rpx;
	height: 318.5rpx;
	padding: 0rpx;
	margin-top: 140.5rpx;
	margin-left: 40rpx;
	float: left;
	position: absolute;
}
.name {
	font-family: PingFangSC-Light;
	font-size: 32rpx;
	color: #ffffff;
	text-align: left;
	height: 45rpx;
	width: 100rpx;
	margin-left: 130rpx;
	margin-top: -60rpx;
}
.old {
	font-family: PingFangSC-Regular;
	font-size: 24rpx;
	color: #f8e71c;
	text-align: left;
	height: 33rpx;
	width: 101rpx;
	margin-left: 260rpx;
	margin-top: -36rpx;
}
.phone {
	background-image: linear-gradient(90deg, #1789fd 0%, #096dcc 99%);
	border-radius: 28px 0 0 28px;
	border-radius: 28px 0px 0px 28px;
	height: 56rpx;
	width: 241rpx;
	margin-left: 422rpx;
	margin-top: -36rpx;
}
.number {
	font-family: PingFangSCMedium;
	font-size: 30rpx;
	color: #ffffff;
	text-align: left;
}
.id {
	ont-family: STHeitiSC-Light;
	font-size: 26rpx;
	color: #ffffff;
	text-align: left;
	height: 26rpx;
	width: 130rpx;
	margin-left: 47rpx;
	margin-top: 30rpx;
}
.idcard {
	font-family: HelveticaNeue;
	font-size: 40rpx;
	color: #ffffff;
	text-align: left;
	height: 47rpx;
	width: 412rpx;
	margin-left: 47rpx;
	margin-top: 15rpx;
}
.box3 {
	background: #ffffff;
	border-radius: 14px;
	border-radius: 14px;
	height: 90rpx;
	width: 670rpx;
	margin-left: 40rpx;
	margin-top: 513rpx;
	float: left;
	position: absolute;
}
.text1 {
	font-family: PingFangSC-Medium;
	font-size: 28rpx;
	color: #333333;
	text-align: left;
	height: 40rpx;
	width: 112rpx;
	margin-left: 30rpx;
	margin-top: 26rpx;
}
.state {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #41c957;
	text-align: left;
	height: 40rpx;
	width: 154rpx;
	margin-left: 550rpx;
	margin-top: -40rpx;
}
.box4 {
	background: #ffffff;
	border-radius: 14px;
	border-radius: 14px;
	float: left;
	position: absolute;
	height: 336rpx;
	width: 670rpx;
	margin-left: 40rpx;
	margin-top: 622rpx;
}
.text2 {
	font-family: PingFangSC-Medium;
	font-size: 28rpx;
	color: #333333;
	text-align: left;
	height: 40rpx;
	width: 140rpx;
	margin-left: 30rpx;
	margin-top: 26rpx;
}
.text3 {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #808080;
	text-align: left;
	line-height: 80rpx;
	height: 40rpx;
	width: 140rpx;
	margin-left: 30rpx;
	margin-top: 20rpx;
}
.text4 {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #808080;
	text-align: left;
	line-height: 80rpx;
	height: 40rpx;
	width: 140rpx;
	margin-left: 30rpx;
	margin-top: 35rpx;
}
.text5 {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #808080;
	text-align: left;
	line-height: 80rpx;
	height: 40rpx;
	width: 140rpx;
	margin-left: 30rpx;
	margin-top: 35rpx;
}
.bank {
	font-family: PingFangSC-Medium;
	font-size: 28rpx;
	color: #333333;
	text-align: right;
	line-height: 80rpx;
	height: 40rpx;
	width: 300rpx;
	margin-left: 290rpx;
	margin-top: -84rpx;
	float: left;
	position: absolute;
}
.card {
	font-family: PingFangSC-Medium;
	font-size: 28rpx;
	color: #333333;
	text-align: right;
	line-height: 80rpx;
	height: 40rpx;
	width: 300rpx;
	margin-left: 290rpx;
	margin-top: -84rpx;
	float: left;
	position: absolute;
}
.num {
	font-family: PingFangSC-Medium;
	font-size: 28rpx;
	color: #333333;
	text-align: right;
	line-height: 80rpx;
	height: 40rpx;
	width: 300rpx;
	margin-left: 290rpx;
	margin-top: -84rpx;
	float: left;
	position: absolute;
}
.box5 {
	background: #ffffff;
	border-radius: 14px;
	border-radius: 14px;
	float: left;
	position: absolute;
	height: 172rpx;
	width: 670rpx;
	margin-left: 40rpx;
	margin-top: 982rpx;
}
.text6 {
	font-family: PingFangSC-Regular;
	font-size: 26rpx;
	color: #333333;
	text-align: left;
	height: 37rpx;
	width: 156rpx;
	margin-left: 60rpx;
	margin-top: -200rpx;
}
.text7 {
	font-family: PingFangSC-Regular;
	font-size: 26rpx;
	color: #333333;
	text-align: left;
	height: 37rpx;
	width: 156rpx;
	margin-left: 460rpx;
	margin-top: -200rpx;
}
.box6{
	background: #ffffff;
	border-radius: 14px;
	border-radius: 14px;
	float: left;
	position: absolute;
	height: 172rpx;
	width: 670rpx;
	margin-left: 40rpx;
	margin-top: 1177rpx;
}
	
.text8{
	font-family: PingFangSC-Regular;
	font-size: 26rpx;
	color: #333333;
	text-align: left;
	height: 37rpx;
	width: 156rpx;
	margin-left: 260rpx;
	margin-top: -200rpx;
}
</style>
